<template>
  <div>
    <basic-container>
      <avue-crud
        :option="option4"
        :data="data"
        :page.sync="page"
        @size-change="sizeChange"
        @row-update="editChange"
        @row-del="delChange"
        @row-save="addChange"
        @current-change="currentChange"
      >
        <template slot-scope="scope" slot="menuLeft">
          <el-button
            type="danger"
            icon="el-icon-plus"
            size="small"
            plain
            @click.stop="handleAdd()"
            >新增
          </el-button>
        </template>
      </avue-crud>
    </basic-container>

    <el-dialog title="新增" :visible.sync="add" width="50%">
      <avue-form ref="form" v-model="obj0" :option="option0">
        <template slot="menuForm">
          <el-button icon="el-icon-user" type="primary" @click="handleSubmit"
            >提 交</el-button
          >
          <el-button icon="el-icon-delete" @click="handleEmpty"
            >清 空</el-button
          >
        </template>
      </avue-form>
    </el-dialog>

    <el-dialog
      title="删除提示"
      :visible.sync="box"
      v-dialogdrag
      :class="{ 'avue-dialog': type == 0 }"
      width="40%"
    >
      <span>会删除分组及分组下的设备信息,确认删除?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="box = false">取 消</el-button>
        <el-button type="primary" @click="delSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import { mapGetters } from "vuex";
import request from "@/router/axios";
import { baseUrl } from "@/config/env";
var typeList = [];
export default {
  name: "wel",
  data() {
    return {
      typeList: [],
      text: "jjj",
      add: false,
      obj: {},
      data: [],
      type: "",
      box: false,
      page: {
        currentPage: 1,
        total: 0,
        layout: "total,pager,prev, next",
        background: false,
        pageSize: 10,
      },
      delval: null,
      obj0: {},
      option0: {
        emptyBtn: false,
        submitBtn: false,
        column: [
          {
            label: this.$t("wel.table.HardwareModel"),
            prop: "typeId",
            filter: false,
            type: "tree",
            dicData: typeList,
            rules: [
              {
                required: true,
                message: "请选择" + this.$t("wel.table.HardwareModel"),
                trigger: "blur",
              },
            ],
          },
          {
            label: this.$t("wel.table.version"),
            filter: false,
            type: "number",
            prop: "version",
            rules: [
              {
                required: true,
                message: "请输入" + this.$t("wel.table.version"),
                trigger: "blur",
              },
            ],
          },
          {
            label: this.$t("wel.table.sort"),
            filter: false,
            type: "number",
            prop: "sort",
            rules: [
              {
                required: true,
                message: "请输入" + this.$t("wel.table.sort"),
                trigger: "blur",
              },
            ],
          },
          {
            label: this.$t("wel.table.updateDddress"),
            filter: false,
            prop: "url",
            rules: [
              {
                required: true,
                message: "请输入" + this.$t("wel.table.updateDddress"),
                trigger: "blur",
              },
            ],
          },
          {
            label: this.$t("wel.table.remarks"),
            filter: false,
            prop: "remarks",
            rules: [
              {
                required: true,
                message: "请输入" + this.$t("wel.table.remarks"),
                trigger: "blur",
              },
            ],
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),

    option4() {
      this.getList({
        page: 1,
        pageSize: this.page.pageSize,
      });
      return {
        addBtn: false,
        align: "center",
        menuAlign: "center",
        delBtn: false,
        column: [
          {
            label: this.$t("wel.table.id"),
            prop: "id",
            //editDisabled:true,
            addDisplay: false,
            editDisplay: false,
          },
          {
            label: this.$t("wel.table.HardwareName"),
            prop: "tname",
            addDisplay: false,
            editDisplay: false,
          },
          {
            label: this.$t("wel.table.HardwareModel"),
            prop: "model",
            addDisplay: false,
            editDisplay: false,
            width:200
          },
          {
            label: this.$t("wel.table.version"),
            prop: "version",
          },
          {
            label: this.$t("wel.table.updateDddress"),
            prop: "url",
            width:300
          },
          {
            width: 100,
            label: this.$t("wel.table.sort"),
            prop: "sort",
            type: "number",
          },
          {
            label: this.$t("wel.table.remarks"),
            prop: "remarks",
          },
          {
            label: this.$t("wel.table.create_time"),
            prop: "create_time",
            dateBtn: true,
            addDisplay: false,
            editDisplay: false,
            type: "date",
            format: "yyyy-MM-dd hh:mm:ss",
            valueFormat: "yyyy-MM-dd hh:mm:ss",
          },
        ],
      };
    },
  },
  created() {
    //获取分组信息
    this.getType();
  },
  methods: {
    getType() {
      let that = this;
      request({
        headers: {
          "Content-Type": "application/json;charset=utf-8",
        },
        method: "post",
        url: baseUrl + "userapi/Equipment/getTypeAll",
      })
        .then(function (response) {
          if (response.data.status == 0) {
          } else if (response.data.status == 1) {
            var data = response.data.data;
            var arr = [];
            for (var i = 0; i < data.length; i++) {
              if (!arr.indexOf[data[i].name]) {
                arr.push({
                  label: data[i].name + data[i].model,
                  value: data[i].id,
                });
              }
            }
            typeList = arr;
          }
        })
        .catch(function (error) {
          console.log(error);
          that.$message.error("系统错误");
        });
    },
    handleEmpty() {
      this.$refs.form.resetForm();
    },
    handleSubmit() {
      let that = this;
      that.$refs.form.validate((vaild, done) => {
        if (vaild) {
          //提交数据
          request({
            headers: {
              "Content-Type": "application/json;charset=utf-8",
            },
            method: "post",
            url: baseUrl + "userapi/Equipment/addVersion",
            data: that.obj0,
          })
            .then(function (response) {
              if (response.data.status == 0) {
              } else if (response.data.status == 1) {
                that.$message.success(response.data.info);
                that.add = false;
                that.getList({ page: 1, pageSize: that.page.pageSize });
              }
            })
            .catch(function (error) {
              console.log(error);
              that.$message.error("系统错误");
            });
        }
      });
    },
    handleAdd() {
      this.add = true;
    },

    sizeChange(val) {
      this.page.currentPage = 1;
      this.page.pageSize = val;
      this.getList();
    },

    currentChange(val) {
      this.page.currentPage = val;
      this.getList({
        page: val,
        pageSize: this.page.pageSize,
      });
    },
    delChange(val, index) {
      this.box = true;
      this.delval = val;
      return;
    },

    delSubmit() {
      let that = this;
      request({
        headers: {
          "Content-Type": "application/json;charset=utf-8",
        },
        method: "post",
        url: baseUrl + "userapi/Equipment/del",
        data: that.delval,
      })
        .then(function (response) {
          if (response.data.status == 0) {
            that.$message.error(response.data.info);
          } else if (response.data.status == 1) {
            that.$message.success(response.data.info);
            that.getList({
              page: that.page.currentPage,
              pageSize: that.page.pageSize,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
          that.$message.error("系统错误");
        });
      that.box = false;
    },
    addChange(val, done, loading) {
      let that = this;
      request({
        headers: {
          "Content-Type": "application/json;charset=utf-8",
        },
        method: "post",
        url: baseUrl + "userapi/Equipment/addSubmit",
        data: val,
      })
        .then(function (response) {
          done();
          if (response.data.status == 0) {
            that.$message.error(response.data.info);
          } else if (response.data.status == 1) {
            that.$message.success(response.data.info);
            that.getList({
              page: that.page.currentPage,
              pageSize: that.page.pageSize,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
          that.$message.error("系统错误");
        });
    },
    editChange(val, index, done, loading) {
      let that = this;
      request({
        headers: {
          "Content-Type": "application/json;charset=utf-8",
        },
        method: "post",
        url: baseUrl + "userapi/Equipment/updateVersion",
        data: val,
      })
        .then(function (response) {
          done();
          if (response.data.status == 0) {
            that.$message.error(response.data.info);
          } else if (response.data.status == 1) {
            that.$message.success(response.data.info);
            that.getList({
              page: that.page.currentPage,
              pageSize: that.page.pageSize,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
          that.$message.error("系统错误");
        });
    },

    getList(data) {
      let that = this;
      request({
        headers: {
          "Content-Type": "application/json;charset=utf-8",
        },
        method: "post",
        url: baseUrl + "userapi/Equipment/getVersion",
        data: data,
      })
        .then(function (response) {
          if (response.data.status == 0) {
            that.$message.error(response.data.info);
          } else if (response.data.status == 1) {
            that.data = response.data.data.data;
            that.page.total = response.data.data.total;
            that.page.pageSize = response.data.data.per_page;
          }
        })
        .catch(function (error) {
          that.$message.error("系统错误");
        });
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
.wel {
  &__header {
    padding: 25px 40px;
    border-bottom: 1px solid #e8e8e8;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &__info {
    display: flex;
    align-items: center;

    &-img {
      border-radius: 72px;
      display: block;
      width: 72px;
      height: 72px;

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    &-content {
      position: relative;
      margin-left: 24px;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
    }

    &-title {
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 12px;
    }

    &-subtitle {
      position: relative;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
    }
  }

  &__extra {
    &-item {
      position: relative;
      padding: 0 32px;
      display: inline-block;

      &:last-child {
        &::after {
          display: none;
        }
      }

      &:after {
        background-color: #e8e8e8;
        position: absolute;
        top: 30px;
        right: 0;
        width: 1px;
        height: 40px;
        content: "";
      }
    }

    &-title {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 4px;
    }

    &-subtitle {
      color: rgba(0, 0, 0, 0.85);
      font-size: 30px;
      line-height: 38px;
      margin: 0;

      span {
        color: rgba(0, 0, 0, 0.45);
        font-size: 20px;
      }
    }
  }
}
</style>
